import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex); //  在vue中使用vuex插件

// 问题1: store实例中改的state,getters,mutations,actions全都写在一起 => 代码量过多
// store实例代码分离:
// 

var store = new Vuex.Store({
  state: { // 公共数据
    a: 1,
    b: 2,
  },
  getters: { // 计算属性
    // 1. getters中可以访问state属性
    doubleA: function (state) {  
      return state.a * 2;
    },
    doubleB: function (state) {
      return state.b * 2;
    },
    both:function(state){
      return state.a + state.b;
    },
    // 2. getters中可以访问state属性,还可以访问其他的getters属性(计算属性)
    doubleBoth:function(state,getters){
      return getters.doubleA + getters.doubleB;
    }

  },
  mutations: {
    // mutations => vuex中修改数据的方法(只能是同步)
    // 方法可以有两个参数 state  payload
    // state =>   当前store实例中的state数据
    // payload => 调用mutations中的方法时可以传一个实参(多个要整合一个数组或对象)
    addA:function(state){
      state.a ++;
    },
    addAn:function(state,payload){
      console.log("addAn被调用",payload);
      state.a +=payload;
    },
    addB:function(state){
      state.b++;
    },
    addBn:function(state,payload){
      state.a +=payload;
    },
    addBoth:function(state,payload){  // payload=> {m,n}
      // 如果payload传入对象参数 => 先对应键名接收数据,在处理state上的数据
      console.log("addBoth",payload);
      var {m,n} = payload;
      state.a += m;
      state.b += n;
    }


  },
  actions: {
    // context => 和store实例有相同属性和方法的新对象
    addA_Async:function(context,payload){
      // 此写法只是启动了异步操作 => 放到WebAPi中 => 等任务队列通知主线程此任务可以执行 => 才会进入主线程执行 => 此写法确实时异步的,但是不知道异步任务什么时候结束
      console.log("context",context);
      // context.state
      // context.getters
      // context.commit()
      // context.dispatch()
      setTimeout(()=>{
        context.commit("addA",payload)
      },2000)
    },
    addAn_Async:function(context,payload){
      console.log("context",context);
      // context.state
      // context.getters
      // context.commit()
      // context.dispatch()
      setTimeout(()=>{
        context.commit("addAn",payload)
      },2000)
    },

    // p.then().then().then().then()


    // actions中的函数 默认返回Promise实例(pending状态) => (返回值是值类型) 等函数执行完毕之后,默认会变为fulfilled,函数的返回值会作为Promise实例的数据存储.
    
    // action中可以执行同步代码
    // addBoth_Async:function(context){
    //   console.log("context",context);
    //   var {commit} = context;
    //   commit("addA");
    //   commit("addB");
    //   return 1;
    // }

    // 如果函数的返回值是一个新的promise实例 =>等该Promise实例状态改变之后 => 继续向后传递
    addBoth_Async:function(context){

      // 此写法可以知道异步操作什么时候结束
      return new Promise(function(resolve){
        setTimeout(()=>{
          console.log("context",context);
          var {commit} = context;
          commit("addA");
          commit("addB");
          resolve(1)
        },2000)
      })
    }
    
  },
  modules: {
  }
})

export default store;
